<template>
  <el-space direction="vertical" :size="30" style="width: 100%" fill>
    <!-- <el-space> -->
    {{ tableTitle }}
    <!-- </el-space> -->

    <el-table :data="tableData" style="width: 100%" :="tableConfig">
      <template
        v-for="(item,index) in (dataConfig as ItableConfig[])"
        :key="index"
      >
        <el-table-column :="item" align="center">
          <!-- <template #default="scope"> -->
          <template v-slot="scope">
            <slot :name="item.slotName" :row="scope.row" :index="index">
              {{ scope.row[item.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-space>
</template>

<script lang="ts" setup>
import { defineProps } from "vue"
import { ITableConfig } from "@/config/tableConfig/types"
import { TableAlign } from "@/config/tableConfig/types"
import Format from "@/utils/fotmatTime"

const props = defineProps({
  config: {
    type: Object,
    default: () => ({})
  },
  dataConfig: {
    type: Array,
    required: true
    // default: () => []
  },
  tableData: {
    type: Array,
    required: true
    // default: () => [1,2,3]
  },
  tableConfig: {
    type: Object,
    default: () => ({})
  },
  tableTitle: {
    type: String,
    required: true
  }
})

// const ITableConfig = config
// const a:ITableConfig
</script>
